<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极客园</title>
    <style>
        .container {
            display: flex;
            margin: 0 auto;
            justify-content: flex-end;
            align-items: center;
            padding: 0 20px;
        }

        .container .left {
            margin-right: 10px;
        }

        .container .left,
        .container .right {
            position: relative;
            /* transform: scale(0.8); */

        }

        .init,
        .break {
            font-size: 16px;
            text-align: center;
            color: #999;
            padding: 3px 0;
        }

        body {
            background-color: #f4f4f4;
        }

        .left img {
            margin-top: 0px;
        }

        .left .slide {
            animation: toTop linear 1s;
        }

        .toBig {
            animation: toBig linear 0.5s;
        }

        .codeview {
            position: absolute;
            width: 362px;
            height: 640px;
            background-color: #fff;
            left: 24px;
            top: 99px;
        }

        #code_message {
            overflow: auto;
        }

        #code_message .message {
            margin: 20px;
            background-color: #f3f3f3;
            padding: 10px;
            line-height: 30px;
            border-radius: 20px;
        }

        .back {
            width: 100%;
            height: 100%;
            background: pink;
            position: fixed;
            left: 0;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .back .btn {
            width: 280px;
            height: 80px;
            user-select: none;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            line-height: 80px;
            font-size: 30px;
            color: #fff;
            background-color: #409EFF;
        }

        .back .title {
            margin-bottom: 200px;
            font-size: 60px;
        }

        .navbar {
            height: 100vh;
            width: 200px;
            background-color: #f4f4f4;
            left: 0;
            top: 0;
            position: fixed;
            padding-top: 20px;
        }

        .navbar .item {
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            /* border-bottom: 1px solid #666; */
        }

        .navbar .item:hover {
            color: blue
        }

        .navbar a {
            text-decoration: none;
            color: rgb(233, 33, 66);
        }

        a:hover {
            color: blue
        }

        .sendcode {
            top: 200px;
            width: 280px;
            height: 60px;
            user-select: none;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            line-height: 60px;
            font-size: 20px;
            color: #fff;
            background-color: #409EFF;
            float: right;
        }

        .current {
            font-size: 20px;
            color: red;
            text-align: center;
            height: 100px;
        }

        @keyframes toTop {
            0% {
                margin-top: 100px
            }

            100% {
                margin-top: 0;
            }
        }

        @keyframes toBig {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @media screen and (max-width: 768px) {
            .navbar {
                display: none;
            }

            .back .title {
                font-size: 30px;
            }

            .sendcode {
                width: 80%;
                height: 40px;
                display: inline-block;
                line-height: 40px;
                font-size: 20px;
                margin-left: 10%;
            }

            #left_img {
                display: none;
            }

            .codeview {
                width: 100%;
                height: 100%;
                left: 0;
                bottom: 0;
                position: fixed;
                margin: 0;
                top: 0;
            }
        }

        .my_chart {
            position: absolute;
            left: 30px;
            top: 200px
        }
    </style>

</head>

<body>
    <!-- 用作新消息提示 -->
    <audio id="msgVoice" src="./audio/message.mp3" autoplay style='display: none'></audio>
    <button id="btnVoice" onclick="playVoice()" style="opacity: 0;"></button>
    <div class="title"></div>
    <div class="navbar">
        <!-- <div class="item">移动项目演示</div> -->
        <div class="item"> <a target="_blank" href="/api.html">移动端文档</a></div>
        <div class="item"> <a target="_blank" href="/api-pc.html">PC文档</a></div>
        <!-- <div class="item">课程讲义</div> -->
    </div>
    <div class="my_chart">
        <div onclick="sendCode()" class='sendcode'>测试发送短信验证码</div>
        <h3 id="allCount">总访问：0次</h3>
        <div id="chart" style="height: 400px;width: 800px;"></div>
        <div id="current" class="current">实时在线：0人</div>
    </div>
    <div class="container">
        <div class="left">
            <!-- 短信验证平台 -->
            <div id="code_message" class="codeview">
            </div>
            <img id="left_img" class="slide" src="./images/phone.jpg" alt="">
        </div>
        <div class="right">
            <div class="codeview">
                <iframe src="./dist/index.html" width="100%" height="100%" frameborder="0"></iframe>
            </div>
            <img src="./images/phone.jpg" alt="">
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="/js/socket.io.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script>

        var msgDom = $('#code_message') // 消息列表
        var msgList = [] // 消息列表
        var socket = null // 初始socket对象
        var changeVoice = false
        var initSocket = function () {
            socket = io('/?key=hmlgnb', { 'transports': ['websocket'] }) // 创建连接 创建连接写入秘钥
            socket.on('connect', function () {
                console.log('连接建立成功')
                addMesasge("init", "与服务器建立通讯！")
            })
            socket.on("disconnect", function () {
                console.log('连接断开')
                addMesasge("break", "与服务器通讯中断！")
            })
            socket.on('message', function (data) {
                addMesasge("message", data)
                renderList()
                $('#btnVoice').trigger('click')
            })
            socket.on('current', function (data) {
                $("#current").text('实时在线：' + data + "人")
            })
            socket.on('toOther', function (data) {
                addMesasge("message", data)
                renderList()
            })
        }
        // 添加内容到消息区
        var addMesasge = function (type, message) {
            msgList.push({ type, message })
            renderList()
        }
        // 渲染list到消息列表
        var renderList = function () {
            var listStr = msgList.map(function (item) {
                if (item.type === 'init') {
                    return `<div class='init'>${item.message}</div>`
                }
                else if (item.type === 'break') {
                    return `<div class='break'>${item.message}</div>`
                }
                else if (item.type === 'message') {
                    return `<div class='message'>${item.message}</div>`
                }
            })
            var height = msgDom[0].scrollHeight
            msgDom.html(listStr.join(''))
            msgDom[0].scrollTop = height  // 滚动到底部
        }

        var copyValue = function (dom) {
            let transfer = document.createElement('input');
            document.body.appendChild(transfer);
            transfer.value = dom.innerText;  // 这里表示想要复制的内容
            transfer.focus();
            transfer.select();
            //  transfer.style.display = 'none'
            document.execCommand("Copy")
            transfer.remove()
        }
        var play = function () {

            $('#btnVoice').trigger('click')
        }
        var playVoice = function () {
            $('#msgVoice')[0].play()
        }

        function closewelcome() {
            $("#code_message").hide()
            setTimeout(() => {
                $("#code_message").show()
                $("#code_message").addClass('toBig')
            }, 1000)
        }
        // 发送验证码
        function sendCode() {
            $.ajax({
                url: `/v1_0/sms/codes/13811111111`,
                success: function (data) {
                },
                error: function ({ responseJSON }) {
                    alert(responseJSON.message)
                }
            })
        }
        initSocket() // 初始化websocket
        closewelcome()
    </script>
    <script type="text/javascript">
        function initChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart'));
            var callData = function () {
                $.ajax({
                    url: '/api_count',
                    success: function (data) {
                        var allCount = data.allCount
                        var result = data.result
                        var valuelist = result.map(function (item) {
                            return item.api_count
                        })
                        var obj = {}
                        result.forEach(function (item) {
                            var time = item._id.split(' ')[1].split(":").slice(0, 2).join(":")
                            if (obj[time]) {
                                obj[time]++
                            } else {
                                obj[time] = 1
                            }
                        })
                        document.getElementById("allCount").innerText = "总访问:" + allCount + '次'
                        myChart.setOption({
                            xAxis: {
                                type: 'category',
                                data: Object.keys(obj)
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: Object.values(obj),
                                    type: 'line',
                                    smooth: true
                                }
                            ]
                        })
                    }
                })
            }
            setInterval(callData, 5000)
        }
      initChart()
    </script>
</body>

</html>